<template>
  <div class="pay" v-loading="page_loading">
    <div class="block" style="margin-bottom: 10px">
      <el-date-picker
        v-model="begin_time"
        type="datetime"
        placeholder="选择开始时间"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <span class="auxiliary">到</span>
      <el-date-picker
        v-model="end_time"
        type="datetime"
        placeholder="选择结束时间"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <div class="input-wrapper">
        <el-input v-model="mer_order_no" placeholder="请输入订单号"></el-input>
      </div>
      <div class="input-wrapper">
        <el-input v-model="merchant_no" placeholder="请输入商户号"></el-input>
      </div>
      <div class="input-wrapper">
        <el-input v-model="channel_name" placeholder="请输入渠道名"></el-input>
      </div>
      <div class="select">
        <el-select v-model="order_status" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="query">查询</el-button>
      <el-button type="danger" @click="down">下载</el-button>
    </div>
    <div class="count-wrapper" v-show="tableData && tableData.length">
      <Count :count_data="{
          totle: totle, // 总笔数
          totle_suc: totle_suc, // 成功笔数
          sum: sum, // 总金额
          sum_suc: sum_suc // 成功总额
        }"></Count>
    </div>
    <div class="table-wrapper">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="count"
          label="序号"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            {{(scope.$index + 1) + (page - 1) * offset}}
          </template>
        </el-table-column>
        <el-table-column
          prop="merchant_no"
          label="商户号"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="mer_order_no"
          label="商户订单号"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="channel_name"
          label="渠道"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="amount"
          label="付款金额(元)"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="payroll_state"
          label="交易状态"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="mer_fee"
          label="商户费率"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="mer_fee_amount"
          label="商户费率金额(元)"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="mer_order_time"
          label="订单时间"
          align="center"
          width="200"
        >
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-wrapper" v-show="tableData && tableData.length">
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="offset"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import Count from '../Count/Count.vue';
  export default {
    name: "pay-roll",
    data(){
      return{
        tableData: [],
        begin_time:'',
        end_time:'',
        options2: [{
          value: 0,
          label: '全部'
        }, {
          value: 1,
          label: '受理中'
        }, {
          value: 2,
          label: '受理成功'
        }, {
          value: 3,
          label: '交易失败'
        }, {
          value: 4,
          label: '订单重复'
        }, {
          value: 5,
          label: '交易成功'
        }],
        order_status: 0, // 订单状态
        mer_order_no: '', // 订单号
        merchant_no: '', // 商户号
        channel_name: '', // 渠道名
        page_loading: true, // 是否在请求表单数据
        payroll_state: ['受理中', '受理成功', '交易失败', '订单重复', '交易成功'],
        offset: 10,
        page: 1,
        total: 0,
        transfer: { // 筛选条件中转变量
          begin_time: '',
          end_time: '',
          mer_order_no: '',
          merchant_no: '',
          payroll_state: '',
          channel_name: ''
        },
        totle: 0, // 总笔数
        totle_suc: 0, // 成功笔数
        sum: 0, // 总金额
        sum_suc: 0 // 成功总额
      }
    },
    created () {
      // 初始化表格
      this.send_table_data();
    },
    components: {
      Count
    },
    methods:{
      handleCurrentChange (val) {
        this.page = val;
        this.send_table_data();
      },
      recharge (e) {
        console.log(e.target);
        this.ElementUIMsgBox.prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.ElementUIMsg({
            type: 'success',
            message: '你的邮箱是: ' + value
          });
        }).catch(() => {
          this.ElementUIMsg({
            type: 'info',
            duration:1000,
            message: '取消输入'
          });
        });
      },
      query () {
        console.log(1);
        // 将表单的值赋值给中转变量
        this.transfer.begin_time = this.begin_time;
        this.transfer.end_time = this.end_time;
        this.transfer.mer_order_no = this.mer_order_no;
        this.transfer.merchant_no = this.merchant_no;
        this.transfer.payroll_state = this.order_status;
        this.transfer.channel_name = this.channel_name;

        this.page = 1;

        this.send_table_data();
      },
      down () {
        window.location.href = `${this.default_url}admin/index/exportExcel?biz_type=2&token=${localStorage['token']}&begin_time=${this.transfer.begin_time}&end_time=${this.transfer.end_time}&mer_order_no=${this.transfer.mer_order_no}&merchant_no=${this.transfer.merchant_no}&payroll_state=${this.transfer.payroll_state}&channel_name=${this.transfer.channel_name}`;
      },
      send_table_data () {
        this.get_table_data({
          biz_type: 2,
          page: this.page,
          offset: this.offset,
          token: localStorage['token'],
          begin_time: this.transfer.begin_time, // 开始
          end_time: this.transfer.end_time, // 结束
          mer_order_no: this.transfer.mer_order_no, // 订单号
          merchant_no: this.transfer.merchant_no, // 商户号
          payroll_state: this.transfer.payroll_state, // 状态
          channel_name: this.transfer.channel_name // 渠道名
        });
      },
      get_table_data (option) { // 获取表格数据
        // 显示加载框
        this.page_loading = true;
        // 请求ajax
        this.axios.post('admin?action=order', option).then((res) => {
          // 关闭加载框
          this.page_loading = false;
          if (res.data.code === 1) {
            // 数据需要过滤
            res.data.data.forEach((item) => {
              item.payroll_state = this.payroll_state[parseInt(item.payroll_state) - 1];

              // 金额分转元
              item.amount = Number(item.amount) ? item.amount / 100 : 0;
              item.mer_fee_amount = Number(item.mer_fee_amount) ? item.mer_fee_amount / 100 : 0;
            });
            this.total = res.data.totle;
            this.tableData = res.data.data;

            // 赋值上面统计
            this.totle =  res.data.totle; // 总笔数
            this.totle_suc = res.data.totle_suc; // 成功笔数
            this.sum = Number(res.data.sum) ? res.data.sum / 100 : 0; // 总金额
            this.sum_suc = Number(res.data.sum_suc) ? res.data.sum_suc / 100 : 0; // 成功总额

            return false;
          }
          if (res.data.code === -3 || res.data.code === -4 || res.data.code === -2) {
            // 删除token缓存
            localStorage['token'] = '';

            // 跳转到登录
            this.$router.replace({
              path: '/login'
            });
          }

          // 清空数据
          this.tableData = [];
        }).catch(() => {

        });

      }
    }
  }
</script>

<style scoped>
  .block{
    padding: 20px 0 20px 20px;
    background-color: #e8e8e8;
  }
  .select{
    width: 140px;
    display: inline-block;
    vertical-align: top;
  }
  .select > .form-control {
    height: 40px;
  }
  .auxiliary {
    font-size: 14px;
  }
  .table-wrapper {
    padding: 0 20px;
  }
  .pagination-wrapper {
    margin: 0 20px;
    padding: 20px 0;
    text-align: center;
    background-color: #fff;
  }
  .input-wrapper {
    display: inline-block;
    width: 140px;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 192px;
  }
</style>
